<template>
  <div class="home">
    <!-- 侧边栏 -->
    <div class="left">
      <div class="title">
        <transition name="fade" mode="out-in">
          <span v-if="isCollapse == false">Obito Blog</span
          ><i v-else class="el-icon-basketball"></i>
        </transition>
      </div>
      <el-menu
        class="el-menu-vertical-demo el-aside"
        :collapse="isCollapse"
        router
        :default-openeds="defaultOpeneds"
        :unique-opened="false"
        :default-active="active"
        background-color="#5979a7"
        text-color="#fff"
        active-text-color="#b7d07a"
        @select="select"
        mode="vertical"
      >
        <el-menu-item index="/home/dashboard">
          <i class="el-icon-orange vertical"></i>
          <span slot="title">Dashboard</span>
        </el-menu-item>
        <el-submenu index="blog">
          <template slot="title">
            <i class="el-icon-notebook-2 vertical"></i>
            <span slot="title">博客管理</span>
          </template>
          <el-menu-item index="/home/write">
            <i class="el-icon-edit vertical"></i> 写文章</el-menu-item
          >
          <el-menu-item index="/home/articlelist"
            ><i class="el-icon-s-order vertical"></i>文章管理</el-menu-item
          >
          <el-menu-item index="/home/writedynamic"
            ><i class="el-icon-edit-outline vertical"></i>写动态</el-menu-item
          >
          <el-menu-item index="/home/dynamicmanagement"
            ><i class="el-icon-chat-dot-round vertical"></i>动态管理</el-menu-item
          >
          <el-menu-item index="/home/cate"
            ><i class="el-icon-menu vertical"></i>分类管理</el-menu-item
          >
          <el-menu-item index="/home/tag"
            ><i class="el-icon-collection-tag vertical"></i>标签管理</el-menu-item
          >
        </el-submenu>
        <el-submenu index="page">
          <template slot="title">
            <i class="el-icon-document-copy"></i>
            <span slot="title">页面管理</span>
          </template>
          <el-menu-item index="/home/site">
            <i class="el-icon-set-up vertical"></i> 站点设置
          </el-menu-item>
          <el-menu-item index="/home/aboutme"
            ><i class="el-icon-tickets vertical"></i>关于我</el-menu-item
          >
        </el-submenu>
        <el-submenu index="image">
          <template slot="title">
            <i class="el-icon-picture"></i>
            <span slot="title">图床管理</span>
          </template>
          <el-menu-item index="3-4-1">
            <i class="el-icon-setting vertical"></i>配置</el-menu-item
          >
          <el-menu-item index="3-4-2"
            ><i class="el-icon-s-operation vertical"></i>管理</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
    <!-- 右边内容区域 -->
    <div class="right" :class="[$route.name == 'write' ? 'overflow' : '']">
      <div class="header">
        <!-- 展开图标 -->
        <div class="icon-bread">
          <i
            :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            @click="showChange"
          ></i>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="(path, index) in routePath"
              :key="index"
              >{{ path }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <!-- <i class="el-icon-s-unfold" @click="show"></i> -->
        <div class="avtar" @click="showDrodown">
          <img src="../assets/images/obito.jpg" alt="" />
        </div>
        <transition name="drodown" mode="out-in">
          <ul class="drodown" v-show="isDrodown">
            <li @click="dialogVisible = true">退出</li>
          </ul>
        </transition>
      </div>
      <div class="main">
        <transition name="fadeinout" mode="out-in" appear>
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition name="fadeinout" mode="out-in" appear>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </div>
    </div>
    <!-- 确认退出登录 -->
    <el-dialog
      title="确认退出登录吗?"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="logout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入 js-cookie
import Cookie from 'js-cookie'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      // 是否折叠
      isCollapse: false,
      // 是否显示退出按钮
      isDrodown: false,
      // 显示或隐藏对话框
      dialogVisible: false,
      // 当前激活的菜单项
      active: '',
      // 菜单默认展开项
      defaultOpeneds: [],
      // 博客选项
      blog: ['tag', 'cate', 'write', 'articlelist', 'writedynamic', 'dynamicmanagement']
    }
  },
  computed: {
    // 路由路径对象
    routePath() {
      return this.$route.path.split('/').slice(1)
    }
  },
  watch: {
    // 监听路由参数对象
    $route: {
      // 侦听器
      handler(newVal, oldVal) {
        const routeName = newVal.name || oldVal.name
        console.log(routeName)
        if (this.blog.includes(routeName)) {
          console.log(routeName)
          this.defaultOpeneds[0] = 'blog'
        } else if (routeName === 'site') {
          console.log(routeName === 'site')
          this.defaultOpeneds[0] = 'page'
        } else {
          this.defaultOpeneds[0] = 'image'
        }
      },
      immediate: true, // 页面刚加载就开始侦听
      deep: true // 深度侦听
    }
  },
  methods: {
    // 侧边栏是折叠还是展开
    showChange() {
      this.isCollapse = !this.isCollapse
    },
    // 点击头像显示退出按钮
    showDrodown() {
      this.isDrodown = !this.isDrodown
    },
    select(index) {
      // console.log(index)
      // console.log(this.$route)
      this.active = index
    },
    // 退出登录
    logout() {
      this.dialogVisible = false
      Cookie.remove('token')
      this.$message.success('退出登录成功!')
      this.$router.push({
        name: 'login'
      })
    },
    // 取消退出登录
    cancle() {
      this.isDrodown = false
      this.dialogVisible = false
    },
    // 关闭对话框
    handleClose() {
      this.isDrodown = false
      this.dialogVisible = false
    }
  },
  mounted() {
    this.active = this.$route.path
    console.log(this.$route.meta)
  }
}
</script>

<style lang="less" scoped>
.home {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  height: 100%;
  .left {
    position: sticky;
    top: 0;
    left: 0;
    height: 100%;
    .el-menu {
      overflow: hidden;
      height: calc(100% - 50px);
    }
    .title {
      position: relative;
      height: 50px;
      line-height: 50px;
      color: #ffffff;
      text-align: center;
      font-weight: 700;
      font-size: 20px;
      background-color: #4970a7;
      .el-icon-basketball {
        font-size: 28px;
      }
    }
  }
  .right {
    width: 100%;
    .header {
      position: sticky;
      top: 0;
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      box-shadow: 0 2px 3px 0 rgba(138, 136, 136, 0.2);
      font-size: 20px;
      background-color: #ffffff;
      color: #5979a7;
      .icon-bread {
        display: flex;
        align-items: center;
        i {
          margin-right: 25px;
          cursor: pointer;
        }
      }
      .avtar {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
      .drodown {
        position: absolute;
        top: 50px;
        right: 20px;
        background-color: #678cc0;
        border-radius: 5px;
        box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.4);
        cursor: pointer;
        &::before {
          position: absolute;
          top: -8px;
          right: 10px;
          content: '';
          width: 0;
          height: 0;
          border: solid 4px transparent;
          border-bottom-color: #678cc0;
        }
        li {
          height: 30px;
          line-height: 30px;
          padding: 0 35px;
          font-size: 14px;
          color: #ffffff;
          border-radius: 5px;
          &:hover {
            background-color: #ffffff;
            color: #678cc0;
          }
        }
      }
    }
  }
}

.vertical {
  transform: translateY(-1px);
}

/* 加过渡给侧边导航*/

/*加快侧边栏文字消失的速度*/

.el-menu {
  border-right: solid 1px rgb(89, 121, 167);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 190px;
  // min-height: 100%;
  min-height: calc(100% - 50px);
}

::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background-color: #678cc0;
  border-radius: 2px;
}

.drodown-enter-active,
.drodown-leave-active {
  transition: height 0.3s;
}
.drodown-enter-to,
.drodown-leave {
  height: 30px;
}
.drodown-enter,
.drodown-leave-to {
  height: 0;
}

/deep/.el-submenu__title i {
  color: #ffffff !important;
}

/deep/.el-menu-item i {
  color: #ffffff;
}

.el-submenu__title i:active,
.el-menu-item i:active {
  color: #b7d07a;
}

.fadeinout-leave-active,
.fadeinout-enter-active {
  transition: all 0.2s ease;
}

.fadeinout-enter {
  transform: translateX(-10px);
  opacity: 0;
}

.fadeinout-leave-to {
  display: none;
  transform: translateX(10px);
  opacity: 0;
}

.fade-leave-active,
.fade-enter-active {
  transition: opacity 0.1s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.overflow {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
